<template>
   <div>
     
       <van-cell-group>
        <myheader/>

        <h1 algin="center">用户登录</h1>

        <!-- //倒计时  (毫秒  1000毫秒 = 1 秒)                 手动计时       需要做的事情                  格式化自己想要的文本-->      
        <van-count-down v-show="show" ref="countDown" :time='30000' :auto-start='false' @finish='finish' format='还剩ss秒' />

        <van-tabs v-model="active">

          <van-tab title='账号登录'>
            账号登录页面
              <van-form @submit="onSubmit">
        <van-field
          v-model="form.username"
          :rules="[
              { required: true, message: '请输入用户名！' },
            ]"
          type="tel"
          label="用户名"
          placeholder="请输入用户名"
          clearable
        />

        <van-field
          v-model="form.password"
          :rules="[
              { required: true, message: '请输入密码！' },
            ]"
          type="password"
          label="密码"
          placeholder="请输入密码"
          clearable
        />          
        <!-- <van-button color='#030301' @click="dingding"> 钉钉登录 </van-button>   -->
          <van-button type="submit">提交</van-button>
    
      </van-form>
            </van-tab>

          <van-tab title='手机登录'>
            手机登录页面
            <van-form @submit="onSubmit1">
         <van-field
          v-model="phone"
          :rules="[
              { required: true, message: '请输入手机号!' },
              { pattern: /^[0-9]{11}$/, message: '手机号由11位数字组成'}
            ]"
          type="tel"
          label="手机号"
          placeholder="请输入手机号"
          clearable>

          <template #button>
            <van-button szie='small' color='orange' @click="get_code">发送验证码</van-button>
          </template>
          
          </van-field>

        <van-field
          v-model="code"
          type="tel"
          label="验证码"
          placeholder="请输入验证码"
          clearable
        />
             
          <van-button type="submit">提交</van-button>
      </van-form>
            </van-tab>

        <!-- 邮箱 -->
        <van-tab title='邮箱登录'>
            邮箱登录页面
            <van-form @submit="onSubmit2">
         <van-field
          v-model="mail"
          :rules="[
              { required: true, message: '请输入正确的邮箱号!' },
              { pattern: /^[0-9]{8,12}@(qq|163)[.]com$/, message: '邮箱号由8位数字组成'}
            ]"
          type="tel"
          label="邮箱号"
          placeholder="请输入邮箱号"
          clearable>
          
          <template #button>
            <van-button szie='small' color='orange' @click="get_mailcode">发送验证码</van-button>
          </template>
          
          </van-field>

        <van-field
          v-model="mailcode"
          type="tel"
          label="验证码"
          placeholder="请输入验证码"
          clearable
        />
             
          <van-button type="submit">提交</van-button>
      </van-form>
            </van-tab>

        </van-tabs>
      
        <myfoot></myfoot>
    </van-cell-group>
   </div>
</template>

<script>
import Myfoot from './myfoot.vue';
import Myheader from './myheader.vue';
export default {
   data () {
      return {
        form:{},
        phone:'',
        code:'',
        //倒计时表单状态
        show:false,
        //表单状态
        active:0,
        //邮箱号
        mail:'',
        mailcode:''
      };
   },

   methods: {
     reg:function(){
       this.axios.get(this.localhost+'ding_urls/').then(res=>{
         window.location.href = res.data.url

       })
     }
     ,
    //倒计时结束
    finish:function(){

        this.$toast.success("倒计时结束");

        //重置倒计时
        this.$refs.countDown.reset();

        //隐藏倒计时
        this.show = false;
    
    },
     //redis定义验证码发送方法
     get_mailcode:function(){
        //判断
        if (this.show === false){
       //开启倒计时
       this.$refs.countDown.start();
       this.show = true;

       //发送验证码请求
        //正常走逻辑
          this.axios.get(this.localhost+'mailapi/?mail='+this.mail)
          .then(res=>{
            if(res.data.code == 200){
              console.log(res);
            // alert(res.data.meg)
            }
          })
      }else{
        this.$toast.fail('您可以稍后重试');
        return false
      }
       
     },
      //redis定义验证码发送邮箱验证码方法
     get_code:function(){
        //判断
        if (this.show === false){
       //开启倒计时
       this.$refs.countDown.start();
       this.show = true;

       //发送验证码请求
        //正常走逻辑
          this.axios.get(this.localhost+'phonelogin/?phone='+this.phone)
          .then(res=>{
            if(res.data.code == 200){
              console.log(res);
            // alert(res.data.meg)
            }
          })
      }else{
        this.$toast.fail('您可以稍后重试');
        return false
      }
       
     },
    //  //mysql
    //  get_code1:function(){
    //       this.axios.post('http://localhost:5000/get_phone/',this.qs.stringify({phone:this.form.phone}))
    //       .then(res=>{
    //         if(res.data.code == 200){
    //           console.log(res);
    //         alert(res.data.meg)
    //         }else{
    //           alert(res.data.meg)
    //         }
    //       })
    //  },
     //redis 登录验证方法
       onSubmit:function(){
           this.axios.post(this.localhost+'login/',this.qs.stringify(this.form))
           .then(res=>{
               if(res.data.code == 200){
                   this.form = {}
                   // 数据存储
                   
                   localStorage.setItem('id',res.data.id);
                   localStorage.setItem('username',res.data.username);
                   localStorage.setItem('token',res.data.token);
                   this.$toast.success(res.data.meg);
                    console.log(res.data);
                   //跳转
                  this.$router.push('/')
               }else{
                   this.$toast.fail(res.data.meg)
               }
           })
       },
       onSubmit1:function(){
          if(this.code === ''){
           this.$toast.fail('请输入验证码');
           return false;
         }
           this.axios.post(this.localhost+'login/',this.qs.stringify({'phone':this.phone,'code':this.code}))
           .then(res=>{
               if(res.data.code == 200){
                   this.form = {}
                   this.$toast.success(res.data.meg)
                  //登录成功,进行数据存储
                  localStorage.setItem('id',res.data.id);
                  localStorage.setItem('username',res.data.username);
                  localStorage.setItem('token',res.data.token);

                  //跳转
                  this.$router.push('/')
               }else{
                   this.$toast.fail(res.data.meg)
               }
           })
       },
       //邮箱
       onSubmit2:function(){
          if(this.mailcode === ''){
           this.$toast.fail('请输入验证码');
           return false;
         }
           this.axios.post(this.localhost+'mailapi/',this.qs.stringify({'mail':this.mail,'mailcode':this.mailcode}))
           .then(res=>{
               if(res.data.code == 200){
                   this.form = {}
                   this.$toast.success(res.data.meg)
                  //登录成功,进行数据存储
                  localStorage.setItem('id',res.data.id);
                  localStorage.setItem('username',res.data.username);
                  localStorage.setItem('token',res.data.token);

                  //跳转
                  this.$router.push('/')
               }else{
                   this.$toast.fail(res.data.meg)
               }
           })
       },
    // //mysql
    //    onSubmit1:function(){
    //        this.axios.post('http://localhost:5000/post_phone/',this.qs.stringify(this.form))
    //        .then(res=>{
    //            if(res.data.code == 200){
    //                this.form = {}
    //                this.$toast.success(res.data.meg)
    //            }else{
    //                this.$toast.fail(res.data.meg)
    //            }
    //        })
    //    }
   },

   computed: {},

   components: {
       'Myheader':Myheader,
      Myfoot
       }
}
</script>
<style lang='css' scoped>

</style>    
